<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/js/layer/layer.js"></script>
</head>

<body>
    <div class="header">
        <div class="gg"> <img src="./images/gg.jpg" alt=""></div>
        <button class="button">×</button>
    </div>

    <div class="cart clearfix">
        <div class="txt4">商品详情</div>
        <ul>
            <li><img src="./images/09png.png" alt="">
                <p class="txt">满天星</p>

            </li>
            <li><img src="./images/2.jpg" alt="">
                <p class="txt">阿玛尼</p>

            </li>
            <li><img src="./images/3.jpg" alt="">
                <p class="txt">夜空</p>

            </li>
            <li><img src="./images/images1/s4-4.jpg" alt="">
                <p class="txt">星夜</p>

            </li>
            <li><img src="./images/images1/s4-2.jpg " alt="">
                <p class="txt">繁星</p>

            </li>
        </ul>
    </div>

    <div class="txtbox">
        <div class="txt4">购物车详情</div>
        <table class="mt">
            <thead>
                <tr>
                    <td><input type="checkbox" id="all">全选</td>
                    <td>商品信息</td>
                    <td>单价(元)</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>


            </tbody>
        </table>

    </div>
    <div class="cart-list">
        <div class="txt5"> 共一件商品&nbsp; <span class="price">总金额</span>

            <span class="price1" style="color: red;">&yen;</span>
        </div>
    </div>


    <div class="footer item" id="a">
        <div class="foot main">
            <div class="foot-top">
                <div class="foottop-Lt ">
                    <p class="p1">客服电话</p>
                    <p class="p2">400-883-2688</p>
                    <p class="p3">外呼电话020-83931899</p>
                    <span>售后维修</span>
                </div>
                <div class="foottop-Md ">
                    <dl>
                        <dt>新手指南</dt>
                        <dd>注册新会员</dd>
                        <dd>购物流程</dd>
                        <dd>手表小知识</dd>
                        <dd>退换货流程</dd>
                    </dl>
                    <dl>
                        <dt>新手指南</dt>
                        <dd>注册新会员</dd>
                        <dd>购物流程</dd>
                        <dd>手表小知识</dd>
                        <dd>退换货流程</dd>
                    </dl>
                    <dl>
                        <dt>新手指南</dt>
                        <dd>注册新会员</dd>
                        <dd>购物流程</dd>
                        <dd>手表小知识</dd>
                        <dd>退换货流程</dd>
                    </dl>
                    <dl>
                        <dt>新手指南</dt>
                        <dd>注册新会员</dd>
                        <dd>购物流程</dd>
                        <dd>手表小知识</dd>
                        <dd>退换货流程</dd>
                    </dl>
                    <dl>
                        <dt>新手指南</dt>
                        <dd>注册新会员</dd>
                        <dd>购物流程</dd>
                        <dd>手表小知识</dd>
                        <dd>退换货流程</dd>
                    </dl>
                </div>
                <img src="./images/(60).png" class="footimg fl">
            </div>
            <div class="foot-btom">
                <div class="footTxt">
                    <a href="#">手表维修</a>
                    <a href="#">加盟网</a>
                    <a href="#">招聘</a>
                    <a href="#">装修</a>
                    <a href="#">世界名表</a>
                    <a href="#">法律咨询</a>
                    <a href="#">车主指南</a>
                    <a href="#">天气预报</a>
                    <a href="#">房产网</a>
                    <a href="#">孔夫子旧书网</a>
                    <span>></span><br>
                    <p class="txtp">
                        <a href="#">供求信息网</a>
                        <a href="#">苹果绿养生网</a>
                        <a href="#">品牌网</a>
                        <a href="#">香烟网</a>
                        <a href="#">企业名录</a>
                        <a href="#">千图</a>
                    </p>
                </div>

            </div>
        </div>
    </div>

</body>

</html>
<script>
    $(function () {
        let user = JSON.parse(localStorage.getItem("userinfo" || [])).u_id;
        console.log(user);
        $.post('/account/getCartById', { u_Id: user }, function (res) {
            let carData = res.data;
            console.log(carData);
            var carStr = ``;
            carData.forEach(item => {
                carStr += `
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="active"> <img src="${item.c_pic}" alt="">
                        <div class="txt">${item.c_name}</div>
                    </td>
                    <td >&yen;<span  class="price">${item.c_price}</span></td>
                    <td>
                        <button class="sub">-</button>
                        <input type="text" class="number" value="${item.c_number}">
                        <button class="add">+</button>
                    </td>
                    <td> <span  class="count"> &yen; ${item.c_total}</span></td>
                    <td> <a   data-info='${item.c_id}'   href="javascript:void(0)" class="del">删除</></td>
                </tr> 

`;

                $("tbody").html(carStr);
                // allchoose();
                // numadd();
            });
        })
    })



    $(function () {
        $.fn.extend({
            deletecart() {
                this.on("click", ".del", function () {
                    let Id = $(this).data("info");
                    console.log(Id);
                    $.post("/account/deleteCart", { c_id: Id }, function (res) {
                        console.log(res);
                        layer.msg(res.msg);
                        window.location.reload();

                    })
                    $(this).parent().parent().remove();
                })
            }
        })
        $("tbody").deletecart()
    })

    //全选
    $(function () {
        $.fn.extend({
            allchoose() {

                this.on("click", "#all", function () {
                    $("tbody :checkbox").prop("checked", $(this).prop("checked"))
                    var allprice = 0;
                    $("tbody input:checkbox:checked").each((index, item) => {
                        var curtr = $(item).parent().parent();
                        var sl = parseInt(curtr.find(".number").val());
                        console.log(sl);
                        var price = parseInt(curtr.find(".price").text());
                        console.log(price);
                        allprice += sl * price;
                    })
                    $(".price1").text(allprice)
                })
                this.on("click", "tbody :checkbox", function () {
                    var countA = $("tbody :checkbox:checked").length
                    var countB = $("tbody :checkbox").length
                    $("#all").prop("checked", countA == countB)
                    var allprice = 0;
                    $("tbody input:checkbox:checked").each((index, item) => {
                        var curtr = $(item).parent().parent();
                        var sl = parseInt(curtr.find(".number").val());
                        console.log(sl);
                        var price = parseInt(curtr.find(".price").text());
                        console.log(price);
                        allprice += sl * price;
                    })
                    $(".price1").text(allprice)
                })
            }
        })

        $(".mt").allchoose()
    })
    //数量加减
    $(function () {
        //减
        $(".mt").on("click", ".sub", function () {
            let cnum = $(this).parent().find(".number");
            cnum.val(parseInt(cnum.val()) - 1);
            if (cnum.val() <= 0) {
                alert("这么好的东西你确定不要么宝 ")
                $(this).parent().parent().remove()
                cnum.val(parseInt(cnum.val()) + 1);
            }
            let ID = $(this).parent().parent().find(".del").data('info');
            let number = $(this).parent().find(".number").val();
            console.log(ID, number);
            $.post("/account/updateCart", { c_Number: number, c_id: ID }, function (res) {
                console.log(res);
                layer.msg(res.msg)
            })
            let Id = JSON.parse(localStorage.getItem('userinfo') || '{}').u_id;
            console.log(Id);
            let ctotal = $(this).parent().parent()
            $.post("/account/getCartById", { u_Id: Id }, function (res) {
                console.log(res);

                ctotal.find(".count").text(res.data[ctotal.index()].c_total)
            })
            var allprice = 0;
            $("tbody input:checkbox:checked").each((index, item) => {
                var curtr = $(item).parent().parent();
                var sl = parseInt(curtr.find(".number").val());
                console.log(sl);
                var price = parseInt(curtr.find(".price").text());
                console.log(price);
                allprice += sl * price;
            })
            $(".price1").text(allprice)
        })
        //加
        $(".mt").on("click", ".add", function () {
            let cnum = $(this).parent().find(".number");
            cnum.val(parseInt(cnum.val()) + 1);
            let ID = $(this).parent().parent().find(".del").data('info');
            let number = $(this).parent().find(".number").val();
            console.log(ID, number);
            $.post("/account/updateCart", { c_Number: number, c_id: ID }, function (res) {
                console.log(res);
                layer.msg(res.msg)
            })
            let Id = JSON.parse(localStorage.getItem('userinfo') || '{}').u_id;
            console.log(Id);
            let ctotal = $(this).parent().parent();
            $.post("/account/getCartById", { u_Id: Id }, function (res) {
                console.log(res.data[ctotal.index()].c_total);
                ctotal.find(".count").text(res.data[ctotal.index()].c_total)
            })
            var allprice = 0;
            $("tbody input:checkbox:checked").each((index, item) => {
                var curtr = $(item).parent().parent();
                var sl = parseInt(curtr.find(".number").val());
                console.log(sl);
                var price = parseInt(curtr.find(".price").text());
                console.log(price);
                allprice += sl * price;
            })
            $(".price1").text(allprice)

        })
    })




</script>